<template>
	<view :style="{ 'width':'750rpx', 'height':statusBarHeight+'px' }">
		<!-- 顶部悬浮定位 -->
		<view class="_focus-status-fixed-class" :style="{ 'height':statusBarHeight+'px', 'background-color':bg }"></view>
	</view>
</template>


<script>
	/**
	 * 手机状态栏
	 * @description vue/nvue通用，基础类组件，通常无导航栏页面使用，系统状态栏占位组件
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-status
	 * @property {String} bg 手机状态栏的背景颜色，默认：#313136
	 */
	export default {
		name: "focus-status",
		// 传递数据
		props: {
			"tag": { type: String, default: 'focus-status' },
			"bg": { type: String, default: '#313136' },
		},
		
		// 页面数据
		data() {
			return {
				// 状态栏的高度(px)
				statusBarHeight: 0,
			}
		},
		
		// 实例挂载完毕
		mounted() {
			// 获取平台信息
			uni.getSystemInfo({
				success: (sysD) => {
					// 状态栏的高度 赋值
					this.statusBarHeight = sysD.statusBarHeight;
				}
			});
		},
		
	}
</script>


<style>
	/* 顶部状态栏 - 悬浮定位容器 */
	._focus-status-fixed-class{
		width: 750rpx;
		position: fixed; left: 0; top: 0;
		z-index: 79;
	}
</style>